<template>
    <div>
      <footer>
        <el-row>
          <router-link to='/'>
            <el-col :span="6" class="el"><div class="grid-content iconfont bg-blue"><span class="ico-info">&#xe603;</span></div></el-col>
          </router-link>
          <router-link to='/lunch'>
            <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe64d;</span></div></el-col>
          </router-link>
           <router-link to='/car'>
            <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info"><el-badge is-dot class="item">&#xe65e;</el-badge></span></div></el-col>
          </router-link>
          <router-link to='/user'>
            <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe602;</span></div></el-col>
          </router-link>
        </el-row>
      </footer>
      <div style="height: 47px"></div>
    </div>
</template>

<script>
export default {
    name: 'HomeFooter'
}
</script>

<style lang="stylus" scoped>
    footer
        position:fixed;
        bottom:0;
        z-index:9999;
        height: 41px
        width: 100%
        background-color: white
        border-top: 1px solid #eee
        .el
          color: black
          .grid-content
            text-align: center;
            height: 41px
            font-size: 30px
            padding: 3px
            .ico-info
               vertical-align: middle
          .bg-blue
            color: #409EFF
</style>